<script setup>
import { addLxP, updateLxP } from '@/api/question'
import { ref, reactive, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance()
// 表单Ref
const formRef = ref()
// 表单数据
const formData = ref({
  id: 0,
  name: '',
  price: 0,
  rank: ''
})
// 表单验证
const optionRules = {
  name: [
    { required: true, message: '请输入礼品名称', trigger: 'blur' },
    { min: 1, max: 6, message: '请输入2~6个字符', trigger: 'blur' }
  ],
  price: [{ required: true, message: '请输入礼品价格', trigger: 'blur' }],
  rank: [{ required: true, message: '请选择礼品等级', trigger: 'blur' }]
}

const emit = defineEmits(['flush'])

// 弹窗是否展示
const state = ref(false)
// 新增||编辑提交
const submit = () => {
  formRef.value.validate(async (isSuccess) => {
    if (isSuccess) {
      var r
      var isadd = formData.value.id == 0 || formData.value.id == undefined
      if (isadd) {
        //新增
        r = await addLxP(formData.value)
      } else {
        //修改
        r = await updateLxP(formData.value)
      }
      if (r.data.code == 200) {
        state.value = false
        ElMessage({
          type: 'success',
          message: isadd ? '新增成功' : '修改成功'
        })
        emit('flush')
      } else {
        ElMessage.error(r.data.msg)
      }
    }
  })
}
// 暴露
defineExpose({
  state,
  formData
})

// 动态增添表单项
const dynamicForm = reactive({
  domains: [
    {
      key: undefined,
      name: '',
      number: ''
    }
  ]
})
const addDomain = () => {
  console.log('proxyaddDomain:', proxy)
  dynamicForm.domains.push({
    key: undefined,
    name: '',
    number: ''
  })
}
const removeDomain = (item) => {
  const index = dynamicForm.domains.indexOf(item)
  if (index !== -1) {
    dynamicForm.domains.splice(index, 1)
  }
}
</script>
<template>
  <div>
    <!-- 添加或编辑 -->
    <el-dialog
      v-model="state"
      :title="formData.id > 0 ? '编辑' : '新增'"
      width="500"
      draggable
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="() => (state = false)"
      @closed="() => (formData = {})"
    >
      <el-form
        ref="formRef"
        style="max-width: 600px"
        :model="formData"
        :rules="optionRules"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item label="问卷名称" prop="name">
          <el-input
            v-model="formData.name"
            type="text"
            autocomplete="off"
            placeholder="请输入问卷名称"
          />
        </el-form-item>
        <el-form-item label="起止日期:" prop="price">
          <!-- <el-input v-model="formData.price" autocomplete="off" placeholder="请输入礼品价格" /> -->
          <el-input-number v-model="formData.price" placeholder="请输入礼品价格" />
        </el-form-item>
        <el-form-item label="等级:" prop="rank">
          <el-select v-model="formData.rank" placeholder="请选择礼品等级">
            <el-option label="一级" :value="'一级'" />
            <el-option label="二级" :value="'二级'" />
            <el-option label="三级" :value="'三级'" />
          </el-select>
        </el-form-item>

        <div class="dynamicDomain" v-for="(domain, index) in dynamicForm.domains">
          <el-row>
            <el-col :span="12"
              ><el-form-item
                :key="domain.key"
                :label="'名字' + index"
                :prop="'domains.' + index + '.value'"
                :rules="{
                  required: true,
                  message: '输入内容不能为空',
                  trigger: 'blur'
                }"
              >
                <el-input v-model="domain.name" /> </el-form-item
            ></el-col>
            <el-col :span="12"
              ><el-form-item
                :key="domain.key"
                :label="'数值' + index"
                :prop="'domains.' + index + '.value'"
                :rules="{
                  required: true,
                  message: '输入内容不能为空',
                  trigger: 'blur'
                }"
              >
                <el-input v-model="domain.number" />

                <el-button type="warning" @click.prevent="removeDomain(domain)"> 移除 </el-button>
              </el-form-item></el-col
            >
          </el-row>
        </div>
        <div style="text-align: center">
          <el-button @click="addDomain">新增表单项</el-button>
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button type="default" @click="state = false">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<style>
.dynamicDomain {
  border: 1px solid #000;
}
</style>
